<template>
  <div>
    <Row style="background: #eee; padding: 20px">
      <Col span="11">
        <Card style="width: 520px">
          <div style="text-align: center">
            <h3>本站访问次数{{ num }}次</h3>
          </div>
        </Card>
      </Col>
      <Col span="11" offset="2">
        <Card style="width: 520px">
          <div style="text-align: center">
            <h3>服务器时间:{{ time }}</h3>
          </div>
        </Card>
      </Col>
    </Row>
    <Divider orientation="left">热点内容
      <Button type="info" @click="getJoke()">刷新</Button>
    </Divider>
    <Row>
      <List item-layout="vertical">
        <ListItem v-for="item in data" :key="item.title">
          <ListItemMeta
            :avatar="item.avatar"
            :title="item.title"
            :description="item.description"
            
          />
          {{item.createTime}}
          <br>
          {{ item.content }}
          <!-- <template slot="action">
            <li><Icon type="ios-star-outline" /> 123</li>
            <li><Icon type="ios-thumbs-up-outline" /> 234</li>
            <li><Icon type="ios-chatbubbles-outline" /> 345</li>
          </template> -->
          <template slot="extra">
            <img
              src="https://picsum.photos/200"
              style="width: 280px"
            />
          </template>
        </ListItem>
      </List>
    </Row>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  data() {
    return {
      num: 1,
      time: "2020-12-27 20:51:01",
      data: [
        {
          name: "This is title 1",
          description:
            "This is description, this is description, this is description.",
          avatar:
            "https://source.unsplash.com/random",
          content:
            "This is the content, this is the content, this is the content, this is the content.",
          createTime: "123",
        },
        {
          name: "This is title 2",
          description:
            "This is description, this is description, this is description.",
          avatar:
            "https://source.unsplash.com/random",
          content:
            "This is the content, this is the content, this is the content, this is the content.",
            createTime: "123",
        },
        {
          name: "This is title 3",
          description:
            "This is description, this is description, this is description.",
          avatar:
            "https://source.unsplash.com/random",
          content:
            "This is the content, this is the content, this is the content, this is the content.",
            createTime: "123",
        },
      ],
    };
  },
  methods: {
    //获取网站访问量
    async getNum() {
      let res = await this.send.get("/getNum",{});

      if (res.data.code == 200 && res.data.data.num) {
        console.log("res.data.data.num = ",res.data.data.num);
        this.num = res.data.data.num;

      }

    },

    //获取服务器时间
    async getNowTime() {
      let res = await this.send.get("/getTime",{});
      if (res.data.code == 200) {
        console.log("res.data.data.nowTime = ",res.data.data.nowTime);
        this.time = moment(res.data.data.nowTime,"YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss");
        
      }
    },

    //获取最新的热点 限三条
    async getHot() {
      let res = await this.send.get('/getHot',{});
      if(res.data.code == 200) {
        let hot = res.data.data.hot;
        this.data = hot;
      }
    },

    //获取冷笑话
    async getJoke() {
      let res = await this.send.get('/getJoke',{});
      if(res.data.code == 200) {
        let hot = res.data.data;
        this.data = hot;
      }
    }
  },
  async created() {
    this.$Message.info("欢迎访问Avenir");
    await this.getNum();
    await this.getNowTime();
    await this.getJoke();
    //this.$forceUpdate()
  },
};
</script>

<style>
</style>